<template>
	<view>
		<view class="mui-content">
			<view class="mui-input-row" id='name-view'>
				<input type="text" id="name" v-model="newUsersName" @input="inputName" />
			</view>
			<view class="box-a">
				<p class="tishi">注意：请不要包含敏感词汇，长度在3-24个字符之间</p>
				<input disabled id="updata" value="保存" @click="submit()" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usersName:'',		//用户名
				newUsersName:'',	//新的用户名
			}
		},
		onLoad(opt) {
			this.usersName = opt.usersName;
			this.newUsersName = opt.usersName;
		},
		methods: {
			inputName(e){
				this.newUsersName = e.target.value;
			},
			submit(){
				if(this.usersName==this.newUsersName){
					this.$u.toast("新的昵称不能和之前相同");
					return
				}
				if(this.newUsersName<3 || this.newUsersName>24){
					this.$u.toast("昵称应在3-24个字符之间");
					return
				}
				this.$http.get('/userinfo/updUsername',{
					userid:uni.getStorageSync('usersId'),
					username:this.newUsersName
				}).then(res => {
					if(res.data.code==200){
						this.$u.toast("修改成功！")
						setTimeout(()=>{
							uni.navigateBack();//返回上一页
							// uni.switchTab({
							// 	url:'./center'
							// })
						},500)
					}else{
						this.$u.toast("修改失败！")
					}
				})
			}
		}
	}
</script>

<style>
	.nav-header h1 {
		text-align: left;
	}
	.nav-header a {
		color: white;
	}
	#name-view {
		margin-top: 20px;
		padding: 0 8px;
	}
	#name {
		border: none;
		background: none;
		border-bottom: 1px solid #FF6700;
		font-size: 16px;
		margin-bottom: 10px;
		padding-bottom: 10px;
	}
	.box-a {
		padding: 0 8px;
	}
	.tishi {
		margin-bottom: 12px;
		font-size: 12px;
	}
	#updata {
		width: 100%;
		background-color: #FF6700;
		color: white;
		height: 40px;
		font-size: 16px;
		border-radius: 4px;
		text-align: center;
	}
</style>
